<template>
    <div class="mui-content mui-scroll-wrapper">
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
                <span class="iconfont icon-fanhui header_fanhui" @tap="goHistory"></span> 
            <!--标题-->
            <h1 class="mui-title" >消息中心</h1>
            <!-- <span v-if="msgCenterList.length!=0" class="mui-pull-right Tit" @tap="compile">编辑</span> -->
        </header>
        <div class="mui-scroll" style="margin-top:10px;">
             <!-- 消息中心 -->
            <div class="msg-center">
              <ul >
                <!-- <li>
                  <div class="msg-neir" >
                    <div class="msg-top">
                        <span>2018年04月15日 10.12</span>
                    </div>
                    <div class="mui-card">
                      <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                          包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
                        </div>
                      </div>
                      <div class="mui-card-footer">
                        <a class="mui-card-link">查看详情 ></a>
                      </div>
                    </div>
                  </div>
                </li> -->
                <!-- <li>
                  <div class="msg-neir" >
                    <div class="msg-top">
                        <span>2018年04月15日 10.12</span>
                    </div>
                    <div class="mui-card">
                      <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                          <p class="card_text_title">恭喜您，今日乘坐专车半价！</p>
                          <p class="card_text_content" >包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </li> -->
                <li v-for="data in msgCenterList">
                  <div class="msg-neir" >
                    <div class="msg-top">
                        <span>{{formatTime(data.data.time)}}</span>
                    </div>
                    <div class="mui-card">
                      <img v-if="data.data.titleimg" class="mui-card-header mui-card-media" style="width:100%;padding:0px" :src="data.data.titleimg">
                      <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                          <p class="card_text_title">{{data.data.title}}</p>
                          <p class="card_text_content" >{{formatContent(data)}}</p>
                        </div>
                      </div>
                      <div class="mui-card-footer">
                        <a class="mui-card-link" @tap="handleGo(data.data)">查看详情 ></a>
                       <!--  <a class="mui-card-link">Read more</a> -->
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
              <!-- <ul v-for="v in msgCenterList">
                  <li>
                      <div class="msg-neir" @tap="goDetails(v)">
                          <div class="msg-top">
                              <span>{{formatTime(v)}}</span>
                          </div>
                          <div class="all-msg" >
                              <p class="tit">{{formatTitle(v)}}</p>
                              <p class="msg">您的订单{{formatMsg(v)}}!</p>
                          </div>
                      </div>
                  </li>
              </ul> -->
            </div>
        </div>
        <!--空时显示-->
        <div class="empty ng-scope" v-if="msgCenterList.length === 0 ">
            <div class="empty-item">
                <div class="icon-zanwu-01" style="font-size:5rem;text-align:center;color:#999;">
                    <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span>
                </div>
                <div class="item-text">暂无消息</div>
            </div>
        </div>
    </div>
</template>

<script>
    import mui from 'static/js/mui.js'
    import storage from '@/utils/localstorage'
    import utils from '@/utils/utils'
    import {getMessage} from '@/nodeApi/other'
    export default {
        components: {},
        data() {
            return{
                msgCenterList:[
                ]
            }
        },
        props: {},
        watch: {},
        methods: {
           handleGo(data){
               this.$router(data.url)
           },
           formatContent(value){
               console.log(value)
               return utils.others.parseMsg(value)
           },
           goDetails(v){
               let a =  v[0].split('|')[2]
               let msg = ''
               switch (a) {
                    case '1':   
                        this.$router.push('/orderNavigate/biding')
                        break;
                    case '2':    
                        this.$router.push('/orderNavigate/biding')
                        break;
                    case '3':   
                        this.$router.push('/orderNavigate/crowdOrder')
                        break;
                    case '4':
                        this.$router.push('/orderNavigate/crowdOrder')
                        break;
                    case '5':  
                        this.$router.push('/orderNavigate/crowdOrder')
                        break;
                    case '6':   
                        this.$router.push('/orderNavigate/orders') 
                        break;
                    case '7':    
                        this.$router.push('/orderNavigate/orders')  
                        break;
                    case '8':   
                        this.$router.push('/orderNavigate/orders') 
                        break;
               }
               return msg 
           },
           formatTime(v){
               let a = utils.time.formatDatetwo( v)
               return a
           },
           formatTitle(v){
               let a = v[0].split('|')[1]
               return a 
           },
           formatMsg(v){
               let a = v[0].split('|')[2]
               let msg = ''
               switch (a) {
                    case '1':   
                        msg = '进入询价'
                        break;
                    case '2':    
                        msg = '已支付询价金'
                        break;
                    case '3':   
                        msg = '	进入拼单' 
                        break;
                    case '4':
                        msg = '已支付拼单金'     
                        break;
                    case '5':  
                        msg = '已转入拼单'   
                        break;
                    case '6':   
                        msg = '已转入订单'  
                        break;
                    case '7':    
                        msg = '已付订金，等待联系' 
                        break;
                    case '8':   
                        msg = '订单失效'  
                        break;
               }
               return msg 
           },
           goHistory(){
               history.go(-1)
                /* this.$router.push({
                    path:"/min"
                }) */
            },
            compile(){
                this.$router.push({
                    name:"msgCompile"
                })
            },
        },
        filters: {},
        computed: {},
        created() {
            this.$store.dispatch('handleUpdateMsgStatus', false)
            let user_id = storage.getLocalstorage('user').id
            getMessage({"user_id":"0C"+user_id}).then(res=>{
                this.msgCenterList = res.data.messages
                console.log(this.msgCenterList)
            })
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: true, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() { }
    }


</script>

<style lang="scss" scoped>
    .mui-bar-nav ~ .mui-content {
        padding-top: 0px;
    }
    .msg-center{
        margin-top:44px;
        margin-bottom:44px;
        .msg-neir{
            padding:0px 12px 0px 12px;
            /* border:1px solid #f5f5f5; */
            .msg-top{
                 text-align:center;
                 margin:10px 0px 10px 0px;
                span{
                    background:#B8B8B8;
                    color:#fff;
                    padding:2px 5px 2px 5px;
                    font-size:0.5rem;
                }
            }
            .all-msg{
                background:#fff;padding:12px;
                border-radius:2px;
                .tit{
                    font-size:0.7rem;   
                    color:#333333;
                    border-bottom:1px solid #F8F8F8;
                    padding-bottom:10px; 
                }
                .msg{
                    font-size:0.65rem;
                    color:#999999;
                }
            }
        }
    }
    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }

    .mui-card{
      box-shadow: 0 1px 2px #ECECEC!important;
      -webkit-box-shadow: 0 1px 2px #ECECEC!important;
      border-radius:5px!important;
      margin: 0px!important;
    }
    .mui-card-header:after{
      background-color: white;
    }
    .mui-card-footer:before {
       background-color: #c8c7cc;
    }
    .card_text_title{
      color: #333333;
      margin-bottom:5px;
    }
    .card_text_content{
      color: #666666;
      font-size:13px;
    }
    .mui-card-link{
      color:#333333;
    }
     /* 商品空时 */
    .empty {
        position: relative;
        display: block;
        width: 100%;
        position:absolute;
        top:43px;
        bottom:0px;
        overflow: hidden;
        background:#fff;
    }

    .empty .empty-item {
        position: absolute;
        left: 0;
        top: 35%;
        display: block;
        width: 100%;
    }

    .empty .empty-item .item-logo {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
    }

    .empty .empty-item .item-text {
        display: block;
        height: 32px;
        line-height: 32px;
        color: #aaaaaa;;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        text-align: center;
    }   
</style>